import React, { Component } from 'react'
import { Layout, Menu, Breadcrumb, Button, Space, PageHeader } from 'antd'
import { DesktopOutlined, PoweroffOutlined } from '@ant-design/icons'
import { Route } from 'react-router-dom'

import Index from '../Index'
import News from '../News'
import List from '../List'
import Details from '../Details'
import ShopCart from '../ShopCart'
import Profile from '../Profile'

import './index.less'

const { Header, Content, Footer, Sider } = Layout

const sliderItems = [
  {
    title: '首页',
    icon: 'icon-ind',
    path: '/home',
  },
  {
    title: '今日资讯',
    icon: 'icon-findHouse',
    path: '/home/news',
  },
  {
    title: '中药浏览',
    icon: 'icon-infom',
    path: '/home/list',
  },
  {
    title: '购物车',
    icon: 'icon-my',
    path: '/home/shopcart',
  },
  {
    title: '个人中心',
    icon: 'icon-my',
    path: '/home/profile',
  },
]

class Home extends Component {
  state = {
    //左侧侧边栏折叠值
    collapsed: false,
    //右侧主题栏-顶部栏-退出按钮
    loadings: [],
    //左侧侧边栏默认选中栏
    defaultSelectedKeys: [''],
  }

  componentDidMount() {
    this.setDefaultSelectedKeys(this.props.location.pathname)
  }

  componentDidUpdate(prevProps) {
    /* 对于前路由和现路由的判断比较 对于左侧侧边栏的选中值进行重新选择 */
    if (prevProps.location.pathname !== this.props.location.pathname) {
      this.setDefaultSelectedKeys(this.props.location.pathname)
    }
  }

  //循环渲染左侧侧边栏
  renderSliderItems() {
    return sliderItems.map((item) => {
      return (
        <Menu.Item
          key={item.title}
          icon={<DesktopOutlined />}
          onClick={() => {
            this.setState({
              defaultSelectedKeys: [item.title],
            })
            this.props.history.push(item.path)
          }}
        >
          {item.title}
        </Menu.Item>
      )
    })
  }

  //设置左侧侧边栏-默认选择栏
  setDefaultSelectedKeys = (path) => {
    let title = []
    sliderItems.forEach((item) => {
      if (item.path === path) title = [item.title]
    })
    this.setState({
      defaultSelectedKeys: title,
    })
  }

  //折叠左侧侧边栏
  onCollapse = (collapsed) => {
    this.setState({ collapsed })
  }

  //右侧主题栏-顶部栏-退出按钮-退出事件
  enterLoading = (index) => {
    this.setState(({ loadings }) => {
      const newLoadings = [...loadings]
      newLoadings[index] = true
      return {
        loadings: newLoadings,
      }
    })
    setTimeout(() => {
      this.setState(({ loadings }) => {
        const newLoadings = [...loadings]
        newLoadings[index] = false

        return {
          loadings: newLoadings,
        }
      })
    }, 6000)
  }

  render() {
    const { collapsed, defaultSelectedKeys } = this.state

    return (
      <Layout style={{ minHeight: '100vh' }} className="home">
        {/* 左侧侧边栏 */}
        <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
          {/* 左侧侧边栏-顶部logo栏 */}
          <div className="logo"></div>

          {/* 左侧侧边栏-中部菜单栏 */}
          <Menu theme="dark" selectedKeys={defaultSelectedKeys} mode="inline">
            {this.renderSliderItems()}
          </Menu>
        </Sider>

        {/* 右侧主题栏 */}
        <Layout className="site-layout">
          {/* 顶部栏 */}
          <Header className="site-layout-background" style={{ padding: 0 }}>
            {/* 顶部栏-项目简介 */}
            <Space>
              <PageHeader
                className="site-page-header"
                title="中药材电子商务平台"
                subTitle="This is a traditional Chinese medicine e-commerce platform"
              ></PageHeader>
            </Space>
            {/* 顶部栏-退出按钮 */}
            <Button
              type="primary"
              icon={<PoweroffOutlined />}
              loading={this.state.loadings[0]}
              onClick={() => this.enterLoading(0)}
            >
              退 出
            </Button>
          </Header>

          {/* 内容栏 */}
          <Content style={{ margin: '0 16px' }}>
            <Breadcrumb style={{ margin: '16px 0' }}>
              <Breadcrumb.Item>{defaultSelectedKeys}</Breadcrumb.Item>
            </Breadcrumb>
            <div
              className="site-layout-background"
              style={{
                padding: 24,
                minHeight: 360,
                width: '100%',
                //background: 'red',
              }}
            >
              <Route path="/home" component={Index} exact></Route>
              <Route path="/home/news" component={News}></Route>
              <Route path="/home/list" component={List}></Route>
              <Route path="/home/details/:id" component={Details}></Route>
              <Route path="/home/shopcart" component={ShopCart}></Route>
              <Route path="/home/profile" component={Profile}></Route>
            </div>
          </Content>

          {/* 底部栏 */}
          <Footer style={{ textAlign: 'center' }}>
            Platform Design ©2022 Created by Zcy
          </Footer>
        </Layout>
      </Layout>
    )
  }
}

export default Home
